<template>
<el-container>
    <!-- 头信息 -->
  <el-header>
    <el-row class="block-col-2">
        <el-col :span="12">
            <el-dropdown trigger="click">
                <span >王小明<img src="../assets/head.jpg" /></span>
                <el-dropdown-menu style="margin-top: 60px;" slot="dropdown">
                    <el-dropdown-item >修改密码</el-dropdown-item>
                    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-row>
  	<img src="../assets/logo.png" /><span>家庭记账 <i class="txt">系统</i></span>
  	
  </el-header>
  <el-container>
    <!-- 左边菜单栏 -->
    <el-aside width="230px">
    	<!-- <el-menu default-active="$router.path" background-color="#324157" text-color="#C0CCDA" active-text-color="#409EFF" unique-opened router>
                <el-submenu v-for="(item,index) in $router.options.routes" :key="index" :index="item.path" v-if="!item.hidden">
                  <template slot="title">
                        <i :class="item.iconCls"></i>
                        <span>{{item.name}}</span>
                      </template>
                   <el-menu-item  v-for="(child,index1) in item.children" :key="index1" :index="child.path" >{{child.name}}</el-menu-item>
                               <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
                </el-submenu>
                    </el-menu> -->
                    <!--左侧菜单组件-->  
     
     <NavMenu :navMenus="navMenus"></NavMenu>

    </el-aside>
    <!-- 右边主页 -->
    <el-main>
        <!-- <strong class="title">{{$route.name}}</strong> -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item,index) in $route.matched"  :key="index"><strong>{{ item.name }}</strong></el-breadcrumb-item>
        </el-breadcrumb>
    	<router-view/>
    </el-main>
  </el-container>
</el-container>
</template>
<script type="text/javascript">
import NavMenu from '@/components/navMenu';
  export default{
    components:{
      NavMenu//左侧菜单组件
    },
    data(){
      return{
        navMenus:[]
      }
    },
    methods:{
      logout(){
        this.$confirm('确认退出吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          sessionStorage.removeItem('user');
          this.$router.push('/login');
        }).catch(() => {

        }); 
      }
    },
    mounted(){
      // alert("页面已经加载完成了");
      this.$axios("../../static/mock.json")
      .then(response=>{
        this.navMenus=response.data.childs;
        console.log(response.data.childs);
      }).catch(error=>{
        console.log('发生错误了：'+error);
      });
    } 
  }
</script>
<style lang="scss">
    @import '../../static/home';
    .el-menu-item{
        // font-size: 22px;
    }
</style>